<template>

    <div class="todo-container">
      <div class="todo-wrap">
        <!--<todo-header :addTodos="addTodos" />-->
        <!--<todo-header @addTodosEmit="addTodos" />-->
        <todo-header ref="header"/>
        <todo-list :todos="todos" :deleteTodos="deleteTodos"/>
        <todo-footer :selectAll="selectAll" :deleteCompleteTodos="deleteCompleteTodos"  :todos="todos"/>
      </div>
    </div>

</template>

<script>
import TodoHeader from './components/TodoHeader'
import TodoList   from './components/TodoList'
import TodoFooter from './components/TodoFooter'
export default {
  name: 'App',
  data(){
    return {
      /*todos:[
        {title:'吃饭',complete:false},
        {title:'睡觉',complete:true},
        {title:'打豆豆',complete:false}
      ]*/
      //从localStorage读取todos
      todos:JSON.parse(window.localStorage.getItem('todos_key') || '[] ')
    }
  },
  methods:{
    addTodos(todo){
      this.todos.unshift(todo)
    },
    deleteTodos(index){
      this.todos.splice(index,1)
    },
    selectAll(check){
      this.todos.forEach((todo) => todo.complete = check)
    },
    deleteCompleteTodos(){
      this.todos = this.todos.filter((todo) => !todo.complete)
    }
  },
  mounted(){
    this.$refs.header.$on('addTodosEmit',this.addTodos)
  },
  watch:{
    todos:{
      deep:true,//深度监视
      handler:function (value) {
        //将todos最新的值,保存到localstorage
        window.localStorage.setItem('todos_key',JSON.stringify(value))
      }
    }
  },
  components: {
    TodoList,
    TodoHeader,
    TodoFooter
  }
}
</script>

<style>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

</style>
